<template>
<li @click.stop="toggle" class="dropdown" :class="{open:isopen}">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      <i class="icon glyphicon" :class="navItemsData.navIcon"></i>
        {{navItemsData.navTitle}}
      <b v-if="navItemsData.isHook" class="caret"></b>
    </a>
    <ul v-if="isUser" class="dropdown-menu">
        <li v-for='item in navItemsData.navList'>
            <a href="#" @click="itemSelect(item.unique)"><i class="icon glyphicon" :class="item.icon"></i> {{item.title}}</a>
        </li>
    </ul>
    <ul v-if="isMail" class="dropdown-menu message-dropdown">
        <li class="message-preview" v-for='item in navItemsData.navList'>
            <a href="#">
                <h5 class="media-heading"><strong>{{item.addresser}}</strong>
                </h5>
                <p class="small text-muted"><i class="icon glyphicon glyphicon-time"></i>
                 {{item.time}}
                 </p>
                <p>
                  {{item.content}}
                </p>
            </a>
        </li>
        <li class="message-footer">
            <a href="#">查看所有信息</a>
        </li>
    </ul>

</li>
</template>

<script type="text/javascript">
import {commonVue} from '../assets/js/base';
import {methods} from '../assets/js/base';


  export default {
    name: 'nav-items',
    props: ['navItemsData'],
    data() {
       return {
           isopen: false
       }
    },
    computed:{
      isUser:function(){
        return !!this.navItemsData.navUser
      },
      isMail:function(){
        return !!this.navItemsData.navMail
      }
    },
    methods: {
        toggle: function() {
            commonVue.$emit('navSelected',this);
            this.isopen = !this.isopen
        },
        itemSelect:function(unique){

              switch (unique) {
                case "center":
                  window.location.href = "center.html";
                break;
                case "password":
                  window.location.href = "password.html";
                break;
                case "exit":
                  methods.userExit();
                break;
              }
        }
    }
  }


</script>
